<template>
	<FixedSizeContainer>
		<div class="fixed-size-container-demo">
			<div class="desc">
				<el-button @click="showAddDialog" type="primary">添加</el-button>
				<el-button @click="tableData = []" type="danger">清空</el-button>
				<div>固定大小容器，适合做表格展示</div>
			</div>
			<!-- 表格需要加height属性，不然无法滚动。实际高度会被flex布局分配 -->
			<el-table :data="tableData" class="table" height="1" style="width: 100%">
				<el-table-column prop="id" label="Id" width="180" />
				<el-table-column prop="name" label="姓名" width="180" />
				<el-table-column prop="age" label="年龄" width="180" />
				<el-table-column prop="address" label="地址" />
			</el-table>
			<el-pagination class="pagination" background layout="prev, pager, next" :total="1000" />
		</div>
	</FixedSizeContainer>

	<el-dialog v-model="addDialogVisible" title="添加项">
		<el-button @click="addItem(10)">+10</el-button>
		<el-button @click="addItem(20)">+20</el-button>
		<el-button @click="addItem(30)">+30</el-button>
		<el-button @click="addItem(100)">+100</el-button>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="addDialogVisible = false">Cancel</el-button>
				<el-button type="primary" @click="addDialogVisible = false">Confirm</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
import FixedSizeContainer from '@/layout/viewContainer/FixedSizeContainer.vue';
export default {
	name:'ShowTable',
	components: {
		FixedSizeContainer
	},
	data() {
		return {
			tableData: [],
			addDialogVisible: false,
			tableItemId: 1001
		};
	},
	created() {
		this.addItem(15);
	},
	methods: {
		showAddDialog() {
			this.addDialogVisible = true;
		},
		addItem(count) {
			for (let i = 0; i < count; i++) {
				let id = this.tableItemId++;
				this.tableData.push({
					id: id,
					name: 'Name' + id,
					age: Math.ceil(Math.random() * 50) + 10,
					address: this.randomStr()
				});
			}
		},
		randomStr() {
			let str = 'qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVVBNM123456789.0';
			let count = Math.ceil(Math.random() * 50) + 3;
			let res = '';
			for (let i = 0; i < count; i++) {
				res += str.charAt(Math.ceil(Math.random() * str.length));
			}
			return res;
		}
	}
};
</script>

<style lang="scss">
.fixed-size-container-demo {
	/**
		 * 这里高度需要给100%
		 */
	height: 100%;
	position: relative;

	display: flex;
	flex-direction: column;
	.table {
		flex: 1;
	}
	.pagination {
		background-color: #fff;
		z-index: 10;
		width: 100%;
	}
}
</style>
